<template>
   <h2>lifecycle-挂载</h2>
</template>

<script>
export default {
    // 挂载前 --> dom挂载到页面之前，可以获取数据，但是不能获取dom
    // ==> 在 template模板被编译成render函数之后，组件内容渲染到页面之前，自动执行的函数
    beforeMount(){
        console.log('-------beforeMount---------')
        console.log('数据可以获取，但是dom还没有挂载哦~')
        console.log(this.$data, '---', this.$el)
        console.log('----------------------------')
    },
    // 挂载后 （重点） --> 在这个时期，dom元素已经挂载到页面上了， 可以获取dom元素
    // 如果在组件渲染初期，需要操作dom元素时，在mounted这个钩子函数中去处理！！
    // mounted里面可以请求数据吗？也是可以的~~~ 
    
    // PS、
    // SSR 服务端渲染没有这个生命周期，为了保持一致，
    // 做了服务端渲染，==> created里面请求数据
    mounted(){
        console.log('-------mounted---------')
        console.log('数据可以获取，dom已经挂载完成了哦~~')
        console.log(this.$data, '---', this.$el)
        console.log('----------------------------')
    }
}
</script>

<style>

</style>